<template>
  <div class="main">
    <router-link class="links" :to="{path:'/bigScreen', query:{}}" tag="a">
      <bigScreen></bigScreen>
    </router-link>
   <router-link class="links" :to="{path:'/cglmap', query:{}}" tag="a">
     <cglmap></cglmap>
   </router-link>
    <router-link class="links" :to="{path:'/orderList', query:{}}" tag="a">
      <orderList></orderList>
    </router-link>
    <router-link class="links" :to="{path:'/onvideo', query:{}}" tag="a">
      <onvideo></onvideo>
    </router-link>
  </div>

</template>

<script>
  import bigScreen from '@/views/bigScreen/bigScreen'
  import cglmap from '@/views/bigScreen/cglmap'
  import orderList from '@/views/bigScreen/orderList'
  import onvideo from '@/views/bigScreen/onvideo'
  export default {
    name: 'index',
    components: {
     bigScreen,
     cglmap,
     orderList,
     onvideo
    },
  }
</script>

<style scoped>
	.main{
		height: 100vh;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-around;
   flex-wrap: wrap;
	}
  .main>.links{
    width: 49%;
    height: 49%;
    background: #0071E5;
  }
</style>
